<template>
  <div class="todo-item">
    <label class="custom-checkbox">
      <input type="checkbox" :checked="completed" @change="toggleCompletion" />
      <span class="checkmark"></span>
    </label>
    <span class="todo-text" :class="{ completed: completed }">{{ title }}</span>
    <button class="delete-btn" @click="removeTodo">删除</button>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    title: {
      type: String,
      required: true
    },
    completed: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleCompletion() {
      this.$emit('update:completed', !this.completed);
    },
    removeTodo() {
      this.$emit('remove-todo');
    }
  }
};
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: #f9f9f9;
  border-radius: 8px;
  gap: 16px; /* 元素之间的间距 */
}

.custom-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.todo-text {
  flex: 1;
  padding: 0 8px;
  font-size: 16px;
  word-break: break-word; /* 长文本自动换行 */
}

.completed {
  text-decoration: line-through;
  color: #888;
}

.delete-btn {
  padding: 6px 12px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.delete-btn:hover {
  background-color: #ff7875;
}

/* 复选框样式 */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

</style>


